import React, { Component } from 'react';
import './css.css'
class DemoComment extends Component {
    state = {
        title: '',
        content: '',
        list: [
            {
                title: '评论:jb',
                content: '评论内容：沙发'
            }
        ]
    }
    //评论
    comment = (e) => {
        let title = e.target.value
        this.setState({
            title
        })
    }

    //内容
    content = (e) => {
        // console.log(e)
        this.setState({
            content: e.target.value
        })
    }
    //发表
    publish = () =>{
        console.log('state',this.state)
        const {title,content} = this.state
        let newArr = this.state.list.concat([{title,content}])
        this.setState({
            list:newArr
        })
    }
    //删除
    del = (index) =>{
        this.state.list.splice(index,1)
        this.setState({
            list:this.state.list
        })
    }
    //清空
    qingkomng = (index) =>{
        this.state.list.splice(index)
        this.setState({
            list:this.state.list
        })
    }
    render() {
        return (<>
            <h2>案例发表评论</h2>
            <div className="comment">
                <div className="header">
                    <input className='header' value={this.state.title} placeholder="请输入评论人" onChange={this.comment} />
                </div>
                <div className='content'>
                    <textarea className='content' value={this.state.content} placeholder="请输入内容" onChange={this.content}></textarea>
                </div>
                <button className='publish' onClick={this.publish}>发表评论</button>
                <button className='publish' onClick={this.qingkomng}>清空评论</button>
                <div className='list'>
                    <ul>
                        {
                            this.state.list.map((item,index) => <li key={index}>
                                <h2>{item.title}</h2>
                                <p>{item.content}</p>
                                <button className='shanchu' onClick={() => this.del(index)}>删除评论</button>
                            </li>)
                        }
                    </ul>
                </div>
            </div>
        </>)
    }
}
export default DemoComment